import React, { Component } from 'react';
import { Button } from 'antd';

import './index.less';

const datas = [];

for (let i = 1; i < 67; i++) {
  datas.push({ name: `Item${i}`, key: `${i}` });
}

const getLatestData = (currentPage = 1, pageSize = 30) => {
  return new Promise((reslove, reject) => {
    let newDatas = [];

    switch (currentPage) {
      case 1:
        newDatas = datas.slice(0, 30);
        break;
      case 2:
        newDatas = datas.slice(30, 60);
        break;
      case 3:
        newDatas = datas.slice(60, 66);
        break;
      default:
        break;
    }

    reslove({
      success: true,
      code: 200,
      data: {
        list: newDatas,
        currentPage,
        pageSize,
      },
    });
  });
};

const move = (arr, startIndex, toIndex) => {
  arr = arr.slice();
  arr.splice(toIndex, 0, arr.splice(startIndex, 1)[0]);
  return arr;
};

const itemWidth = 200;
const lineHeight = 100;

class DndSample extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    list: [],
    currentPage: 1,

    dragging: false,
    draggingIndex: -1,

    startPageX: 0,
    offsetPageX: 0,

    startPageY: 0,
    offsetPageY: 0,
  };

  componentDidMount() {
    getLatestData(1).then((res) => {
      const { currentPage: newcurrentPage, list: newlist } = res.data;
      this.setState({
        list: newlist,
        currentPage: newcurrentPage,
      });
    });
  }

  handlePre = async () => {
    const { currentPage } = this.state;
    if (currentPage > 1) {
      const params = currentPage - 1;
      const res = await getLatestData(params);
      const { currentPage: newcurrentPage, list: newlist } = res.data;
      this.setState({
        list: newlist,
        currentPage: newcurrentPage,
      });
    }
  };

  handleNext = async () => {
    const { currentPage } = this.state;
    if (currentPage < 3) {
      const params = currentPage + 1;
      const res = await getLatestData(params);
      const { currentPage: newcurrentPage, list: newlist } = res.data;
      this.setState({
        list: newlist,
        currentPage: newcurrentPage,
      });
    }
  };

  handleMounseDown = (evt, index) => {
    const slef = this;
    // 长按1秒拖动
    const timer = setTimeout(function () {
      slef.setState({
        dragging: true,
        startPageX: evt.pageX,
        currentPageX: evt.pageX,

        startPageY: evt.pageY,
        currentPageY: evt.pageY,
        draggingIndex: index,
      });
    }, 1000);

    // 长按1.5秒删除
    const timer1 = setTimeout(function () {
      console.log('删除');
    }, 1500);
  };
  handleMouseUp = () => {
    this.setState({
      dragging: false,
      startPageX: 0,
      startPageY: 0,
      draggingIndex: -1,
    });
  };
  handleMouseMove = (evt) => {
    let offset = evt.pageY - this.state.startPageY;

    let offsetX = evt.pageX - this.state.startPageX;

    const draggingIndex = this.state.draggingIndex;
    if (
      (offset > lineHeight || offsetX > itemWidth) &&
      draggingIndex < this.state.list.length - 1
    ) {
      // move down
      if (offset > lineHeight) {
        offset -= lineHeight;
        this.setState({
          startPageY: this.state.startPageY + lineHeight,
        });
      }
      if (offsetX > itemWidth) {
        offsetX -= itemWidth;
        this.setState({
          startPageX: this.state.startPageX + itemWidth,
        });
      }

      this.setState({
        list: move(this.state.list, draggingIndex, draggingIndex + 1),
        draggingIndex: draggingIndex + 1,
      });
    } else if (
      (offset < -lineHeight || offsetX < -itemWidth) &&
      draggingIndex > 0
    ) {
      // move up
      if (offset < -lineHeight) {
        offset += lineHeight;
        this.setState({
          startPageY: this.state.startPageY - lineHeight,
        });
      }

      if (offsetX < -itemWidth) {
        offsetX += itemWidth;
        this.setState({
          startPageX: this.state.startPageX - itemWidth,
        });
      }

      this.setState({
        list: move(this.state.list, draggingIndex, draggingIndex - 1),
        draggingIndex: draggingIndex - 1,
      });
    }
    this.setState({ offsetPageY: offset, offsetPageX: offsetX });
  };

  getDraggingStyle(index) {
    if (index !== this.state.draggingIndex) return {};
    return {
      backgroundColor: '#eee',
      transform: `translate(${this.state.offsetPageX}px, ${this.state.offsetPageY}px)`,
      opacity: 0.5,
    };
  }

  render() {
    return (
      <>
        <div className="dnd-sample">
          {this.state.list.map((text, i) => (
            <div
              className="appItem5Col6Row shake-little"
              key={text.key}
              onMouseDown={(evt) => this.handleMounseDown(evt, i)}
              style={this.getDraggingStyle(i)}
            >
              {text.name}
            </div>
          ))}
        </div>
        <div>
          {this.state.dragging && (
            <div
              className="dnd-sample-mask"
              onMouseMove={this.handleMouseMove}
              onMouseUp={this.handleMouseUp}
            />
          )}
          <Button type="primary" onClick={this.handlePre}>
            上一页
          </Button>
          <Button type="primary" onClick={this.handleNext}>
            下一页
          </Button>
                      
          <div className="class">sadfads</div>
        </div>
      </>
    );
  }
}

export default DndSample;
